﻿@using System.Xml.XPath
@{
    var bottomImage = string.Empty;
    var bottomTel = string.Empty;
    var topImage = string.Empty;
    var title = string.Empty;
    var mainContent = string.Empty;
    var topImageLink = string.Empty;
    var bottomImageLink = string.Empty;
    var telLink = string.Empty;
    var topDescription = string.Empty;
    var fatherTitle = string.Empty;
    XPathNodeIterator currentNode = library.GetXmlNodeCurrent();
    if (currentNode.Current != null)
    {
        string parentNodeId = currentNode.Current.GetAttribute("parentID", "");
        string grandFatherNodeId = library.GetXmlNodeById(parentNodeId).Current.GetAttribute("parentID", "");
        int topImageId = Int32.Parse(library.GetXmlNodeById(grandFatherNodeId).Current.SelectSingleNode("topImage").InnerXml);
        topImage = library.GetMedia(topImageId, true).Current.SelectSingleNode("Image").SelectSingleNode("umbracoFile").InnerXml;
        int bottomTelId = Int32.Parse(library.GetXmlNodeById(grandFatherNodeId).Current.SelectSingleNode("bottomTel").InnerXml);
        bottomTel = library.GetMedia(bottomTelId, true).Current.SelectSingleNode("Image").SelectSingleNode("umbracoFile").InnerXml;
        int bottomImageId = Int32.Parse(library.GetXmlNodeById(grandFatherNodeId).Current.SelectSingleNode("bottomIamge").InnerXml);
        bottomImage = library.GetMedia(bottomImageId , true).Current.SelectSingleNode("Image").SelectSingleNode("umbracoFile").InnerXml;
        bottomImageLink = library.GetXmlNodeById(grandFatherNodeId).Current.SelectSingleNode("bottomiamgelink").InnerXml;
        telLink = library.GetXmlNodeById(grandFatherNodeId).Current.SelectSingleNode("tellink").InnerXml;
        topDescription = library.GetXmlNodeById(grandFatherNodeId).Current.SelectSingleNode("topDescription").InnerXml;

        fatherTitle = library.GetXmlNodeById(parentNodeId).Current.GetAttribute("nodeName" , "");
        title = currentNode.Current.GetAttribute("nodeName","");
        mainContent = HttpUtility.HtmlDecode(currentNode.Current.SelectSingleNode("mainContent").InnerXml).Replace("\r\n"," ");
        mainContent = mainContent.Replace("'", "&acute;");
    }
}
<link href="../scripts/sencha-touch-2.1.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script src="../scripts/sencha-touch-2.1.0/sencha-touch-all.js" type="text/javascript"></script>
<script type="text/javascript">
    Ext.application({
        name: "top",
        launch: function () {
            var mainContent = Ext.create("Ext.form.Panel", {
                flex: '65',
                width: '100%',
                margin: '0',
                padding: '10px 20px',
                html: '<div>@Html.Raw(mainContent)</div>'
            });
            Ext.create("Ext.form.Panel", {
                fullscreen: true,
                draggable:false,
                margin: "0",
                padding: "0",
                layout: {
                    type: "vbox",
                    align: "stretch"
                },
                items: [
                    {//top iamge
                        flex: "15",
                        docked: "top",
                        width: "100%",
                        margin: "0",
                        html: "<div style='text-align:center; background-color: #0a86ad;height:10%'><a href='@topImageLink' target='_blank'><img alt='' src='@topImage' style='max-width:650px;max-height:100px' height='10%' width='100%'/></a></div>" +
                        "<div style='height:5%;line-height: 28px;text-align: center;color: #535455;font-size: 18px;height:5%;padding:5px;max-height:60px'>@topDescription</div>"
                    },
                    {//toolbar
                        xtype: 'toolbar',
                        flex: "5",
                        docked: "top",
                        width: "100%",
                        height: "5%",
                        padding: '7px',
                        margin: "0",
                        title: '@title',
                        style: '',
                        items: [{
                            xtype: 'button',
                            text: '@fatherTitle',
                            height: '23',
                            ui: 'back',
                            style: 'btStyle',
                            handler: function () {
                                window.location = '/';
                            }
                        }]
                    },
                    mainContent,
                    {//bottom
                        flex: "15",
                        docked: "bottom",
                        width: '100%',
                        style: 'text-align:center;',
                        margin: '0',
                        padding: "0",
                        html: "<div style:'height:5%'><a tel:@telLink><img alt='' src='@bottomTel' style='max-width:300px;max-height:40px' height='5%' width='60%'/></a></div>" +
                        "<div style='height:10%;background-color: #0a86ad;text-align:center;'><a href='@bottomImageLink' target='_blank'><img alt='' src='@bottomImage' style='max-width:650px;max-height:80px' height='10%' width='100%'/></a></div>"
                    }
                ]
            });
        }
    });
</script>
<body>
</body>
